<template>
  <view class="setting-layout">
    <my-header title="设置"></my-header>
		<my-content class="content">
        <view class="setting">
          <view class="setting_item" @click="header(`/pages/user/about`)">
            <view>关于我们</view>
            <image class="setting_icon" src="https://www.dingxians.cn/upload/images/user/arrow-right.png"></image>
          </view>
          <view class="setting_item" @click="header(`/pages/user/edit`)">
            <view>编辑资料</view>
            <image class="setting_icon" src="https://www.dingxians.cn/upload/images/common/arrow-right.png"></image>
          </view>
        </view>
				<view style="flex: 1;"></view>
				
        <view class="logout" @click="logout()">退出登录</view>
      </my-content>
  </view>
</template>

<script>
import api from '../../api/index.js'
import request from '../../api/request.js'
export default {
  data() {
    return {
      userData: {},
    }
  },
  onLoad() {},
  onShow() {},

  methods: {
    logout() {
      uni.showModal({
        title: '提示',
        content: `确定退出吗？`,
        success: (result) => {
          if (result.confirm) {
            api.users
              .logout()
              .then((res) => {
                if (res.code === 200) {
                  uni.removeStorageSync('user_id')
                  uni.removeStorageSync('avatar')
                  uni.removeStorageSync('nickname')
                  uni.removeStorageSync('mobile')
                  uni.removeStorageSync('token')
                  this.show('退出成功')
                  setTimeout(() => {
                    uni.switchTab({
                      url: '/pages/index/index',
                    })
                  }, 500)
                }
              })
              .catch((error) => {
                console.log(error)
              })
          } else if (result.cancel) {
            console.log('用户点击取消')
          }
        },
      })
    },
  },
}
</script>

<style lang="scss">
.setting-layout {
	background-color: #141414;
	height: 100vh;
}
.content {
	height: 100vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
  /* height: 100%; */
  // background: linear-gradient(to bottom, #d6c8fa, #f7f7f7);
  // background: linear-gradient(to bottom, #D5C7FA, #E2ECF5);
}
.setting {
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  .setting_item {
    width: 670rpx;
    margin: 0 auto;
    line-height: 110rpx;
    height: 110rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
		font-size: 32rpx;
		color: white;
    &:first-child {
      margin-top: 20rpx;
    }
    .setting_icon {
      width: 22rpx;
      height: 22rpx;
    }
  }
}

.logout {
/* 	position: absolute;
	left: 0;
	bottom: 0; */
  height: 84rpx;
  line-height: 84rpx;
  align-items: center;
  background-image: url('https://www.dingxians.cn/upload/images/common/btn-primary.png');
	background-size: 100% 100%;
	font-size: 32rpx;
	color: white;
  width: 610rpx;

  margin: 50rpx auto;
  text-align: center;
  border-radius: 10rpx;
}
</style>
